<template>
    <el-card>
        <div class="mod-major">
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="search.majorName" placeholder="请输入专业名称">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchMajor()">搜索
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="isAuth('easstudent:student:save')" type="primary" @click="addOrUpdateHandle()">新增
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="isAuth('easstudent:student:delete')" :disabled="dataListSelections.length <= 0"
                        type="danger" @click="deleteHandle()">批量删除
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table :data="studentList" row-key="sid"  v-loading="dataListLoading"
                @selection-change="selectionChangeHandle" style="width: 100%  ">
                <el-table-column type="selection" header-align="left" align="left" width="50">
                </el-table-column>
                <el-table-column width='30' type="expand">
                    <template slot-scope="props">
                        <el-form inline label-position="left"  class="demo-table-expand">
                            <el-form-item label="姓名">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="学号">
                                <span>{{ props.row.sid }}</span>
                            </el-form-item>
                            <el-form-item label="班级">
                                <span>{{ props.row.classInfo.classCode}}</span>
                            </el-form-item>
                            <el-form-item label="身份证号码">
                                <span>{{ props.row.certNo }}</span>
                            </el-form-item>
                            <el-form-item label="籍贯">
                                <span>{{ props.row.local }}</span>
                            </el-form-item>
                            <el-form-item label="政治面貌">
                                <span>{{ props.row.political }}</span>
                            </el-form-item>
                            <el-form-item label="专业">
                                <span>{{ !props.row.classInfo.major?'':props.row.classInfo.major.majorName }}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="sid" header-align="center" align="center" min-width="100" label="学号">
                </el-table-column>
                <el-table-column prop="name" header-align="center" align="center" min-width="100" label="姓名">
                </el-table-column>
                <el-table-column prop="classInfo.major.majorName" header-align="center" align="center" min-width="100" label="专业">
                </el-table-column>
                <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="isAuth('easstudent:student:update')" type="text" size="small"
                            @click="addOrUpdateHandle(scope.row.sid)">修改</el-button>
                        <el-button v-if="isAuth('easstudent:student:delete')" type="text" size="small"
                            @click="deleteHandle(scope.row.sid)">
                            删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
        </div>
    </el-card>
</template>

<script>
import { studentApi } from '@/api/student'
import { treeDataSetParent } from '@/utils';
import addOrUpdate from './student-add-or-update.vue';

export default {
    components: {
        addOrUpdate
    },
    props: {},
    data() {
        return {
            studentList: [],
            addOrUpdateVisible: false,
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListSelections: [],
            dataListLoading: true,
            search: {
                majorName: '',
                deptName: '',
                sid: '',
                name: ''

            }
        };
    },
    watch: {},
    computed: {},
    methods: {
        getDataList() {
            this.dataListLoading = true
            let data = Object.assign(this.search,
                {
                    limit: this.pageSize,
                    page: this.pageIndex
                    // name:this.search
                })
            studentApi.listStudent(data).then(({ page }) => {
                this.studentList = page.list
                this.dataListLoading = false
                this.totalPage = page.totalPage

            }).catch(e => {
                this.$message({
                    message: '加载失败',
                    type: 'error',
                    duration: 1500,
                    onClose: () => {
                        this.dataListLoading = false
                    }
                })

            })

        },
        searchMajor() {
            this.getDataList()
        },
        addOrUpdateHandle(id) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val
        },

        deleteHandle(id) {

            var ids = id ? [id] : this.dataListSelections.map(item => {
                return item.majorId
            })
            this.$confirm(`确定对[${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                studentApi.deleteStudent(ids).then(() => {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.getDataList()
                        }
                    })

                })
            }).catch(() => { })
        }
    },
    created() {
        this.getDataList()
    },
    mounted() {

    }
};
</script>

<style lang="scss">
//
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<style lang="scss" scoped>
.el-card {
    max-width: 60rem;
    min-width: 34rem;
    margin: 5rem auto;
}
</style>
